@charset "UTF-8";

/* 날씨 정보 css */
.weather-area {
	height: 120px;
	display: flex;
}
.weather-div-area {
	width: 100%; 
	display: flex; 
	flex-direction: column; 
	align-items: center;
	text-align: center; 
}
.temp-area div {
	height: 30px; 
	align-content: center; 
	text-align: center;
}
.temp-area img {
	width:80px; 
	height: 90px;
}
.win-area div, .win-area img {
	height: 100%; 
	width: 30px;
	align-content: center;
}
.weather-data-area div {
	height: 100%; 
	width: 100%; 
	align-content: center;
	font-weight: bold;
}

.weather-cast-item .weather-cast-news {
	margin-bottom: 0rem;
}

/* 색 정보 css */
.col_sky {
	color: #05B1F0;
}
.col_red {
	    color: #D51111;
}
.col_orange {
	color: #EB7029;
}
.col_gr {
	color: #00B050;
}

/* 기후취약인구 - 점수 css */
.score_span {
	width: 70px;
    font-size: 13px;
    text-align: center;
    background-color: red;
    color: white;
    border-radius: 20px;
    padding: 1px 0px;
    margin: 0px 5px;
}

.ico-arrow-up {
	background: url(../images/climate/arrow_up.png) center no-repeat;
	width: 25px;
    height: 25px;
    display: none;
}
.ico-arrow-down {
	background: url(../images/climate/arrow_down.png) center no-repeat;
	width: 25px;
    height: 25px;
    display: none;
}

/* 전용 그라디언트 스타일 */
.legend-bar.vulner-ecny .legend-gradient {
  background: linear-gradient(to right, #3F77B6 0%, #C9DAEE 100%);
}
.legend-bar.vulner-health .legend-gradient {
  background: linear-gradient(to right, #235A25 0%, #C9E6CB 100%);
}
.legend-bar.vulner-social .legend-gradient {
  background: linear-gradient(to right, #E6880A 0%, #FDEDD3 100%);
}
.legend-bar.vulner-total .legend-gradient {
  background: linear-gradient(to right, #C75038 0%, #E5DEDA 100%);
}
.legend-bar.vulner-all .legend-gradient {
  background: linear-gradient(to right,
  #7a0403 0%,    /* 진한 빨강/갈색 */
  #c92903 12.5%,  /* 빨강 */
  #f56918 25%,    /* 주황 */
  #fbb938 37.5%,  /* 진한 노랑 */
  #c9ef34 50%,    /* 연노랑/연두 */
  #1be5b5 62.5%,  /* 민트/초록 */
  #35abf8 75%,    /* 밝은 파랑 */
  #264b8f 87.5%,  /* 중간 파랑 */
  #30123b 100%     /* 어두운 보라 */
);
}

.legend-bar.rain-danger-eval .legend-gradient {
  background: linear-gradient(to right, #D3EAFD 0%, #225C9D 100%);
}
.legend-bar.heat-rst-uhtln .legend-gradient {
  background: linear-gradient(to right, #FAF0DC 13%, #EECFB8 26%, #E2AE94 39%, #D68D70 52%, #C66C58 65%, #A74A44 78%, #893733 90%, #822C2D 100%);
}
.legend-bar.rain-evc-fclt .legend-gradient {
  background: linear-gradient(to right, #882514 0%, #a14e3f 15%, #c06b5c 30%, #cb7f72 45%, #e1a38d 60%, #dbaea4 75%, #fadacb 90%, #fff5f0 100%);
}
.legend-bar.rain-weak-fclt .legend-gradient {
  background: linear-gradient(to right, #faf0dc 0%, #c8553e 100%);
}
.legend-bar.livePop .legend-gradient {
  background: linear-gradient(to right, #faf0dc 0%, #C8553E 100%);
}
.legend-bar.slideVulnerArea .legend-gradient {
  background: linear-gradient(to right, #FFB347 0%, #FFB347 100%);
}
.legend-bar.rainLivePopTotal .legend-gradient {
  background: linear-gradient(to right, #FFEACC 0%, #FC7902 100%);
}
.legend-bar.rainLivePop1 .legend-gradient {
  background: linear-gradient(to right, #FFC8C7 0%, #E95326 100%);
}
.legend-bar.rainLivePop2 .legend-gradient {
  background: linear-gradient(to right, #CCFFCC 0%, #004D1A 100%);
}
.legend-bar.rainLivePop3 .legend-gradient {
  background: linear-gradient(to right, #CCE5FF 0%, #003880 100%);
}
.legend-bar.heatRstThrcf .legend-gradient {
/*   background: linear-gradient(to right, #8000ff 0%, #00ffff 25%, #ffff00 50%, #ff8000 75%, #ff0000 100%); */
/*   background: linear-gradient(to right, #fff5f0 0%, #fee0d2 12.5%, #fcbba1 25%, #fc9272 37.5%, #fb6a4a 50%, #ef3b2c 62.5%, #cb181d 75%, #a50f15 87.5%, #67000d 100%); */
/*   background: linear-gradient(to right, #000000 0%, #575757 12.5%, #989898 25%, #f9c3bb 37.5%, #fcbba1 50%, #fc9272 62.5%, #fb6a4a 75%, #ca0020 87.5%, #67000d 100%); */
background: linear-gradient(to right,
  #30123b 0%,     /* 어두운 보라 */
  #264b8f 12.5%,  /* 중간 파랑 */
  #35abf8 25%,    /* 밝은 파랑 */
  #1be5b5 37.5%,  /* 민트/초록 */
  #c9ef34 50%,    /* 연노랑/연두 */
  #fbb938 62.5%,  /* 진한 노랑 */
  #f56918 75%,    /* 주황 */
  #c92903 87.5%,  /* 빨강 */
  #7a0403 100%    /* 진한 빨강/갈색 */
);
}


/* 날씨 정보 */
.weather_img {
    width: 70px;
    height: 60px;
}
.weather_img.sun {
	background: url(../assets/images/ico/ico-sun.png) center no-repeat;
}
.weather_img.snow {
	background: url(../images/climate/weather-snow.png) center no-repeat;
}
.weather_img.cloud {
	background: url(../images/climate/weather-cloud.png) center no-repeat;
}
.weather_img.rain {
	background: url(../images/climate/weather-rain.png) center no-repeat;
}
.weather_img.cloudSun {
	background: url(../images/climate/weather-cloudSun.png) center no-repeat;
}

/* 차트 정보 */
#heatPleaChart, #heatVulnerChart, #heatSafeChart, #rainFcltChart, #slideChart, #slideSafeChart, #socialChart, #economicChart, #healthyChart {
	border: solid 1px #c8c8c8;
    border-radius: 15px;
}
#rainStepChart, #slideStepChart {
	border: solid 0px #c8c8c8;
    border-radius: 15px;
}

/* 범례 */
.climate-icon-box {
	padding: 1rem;
}
.climate-icon-item {
	display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1rem;
}
.climate-icon-item:first-child {
    margin-top: 0;
}
.climate-icon-start, .climate-icon-end {
	width: 32px;
    height: 32px;
    background: no-repeat center / contain;
}
.climate-title {
	font-size: 1.4rem;
}
.climate-legend-item {
    justify-items: center;
    align-content: center;
}
.climate-legend-div {
	width: 60%;
    height: 60%;
    border-radius: 20px;
    display: block;
}

/* 하천범람 / 도시침수 / 침수흔적 범례 */
.cliamte-rain-one {
	background-color: #fdfbc7;
}
.cliamte-rain-two {
	background-color: #e6ff99;
}
.cliamte-rain-three {
	background-color: #38fefd;
}
.cliamte-rain-four {
	background-color: #ce9afe;
}
.cliamte-rain-five {
	background-color: #ce3f87;
}
.cliamte-rain-six {
	background-color: #0000ff;
}
.cliamte-rain-seven {
	background-color: #a5e7f0;
}
.cliamte-rain-eight {
	background-color: #ccf399;
}
.cliamte-rain-nine {
	background-color: #f89f0a;
}
.cliamte-rain-ten {
	background-color: #e60000;
}

/* 홍수위험도 등급 범례 */
.cliamte-rain-gisu-one {
	background-color: #91cc75;
}
.cliamte-rain-gisu-two {
	background-color: #4e75c5;
}
.cliamte-rain-gisu-three {
	background-color: #e3ec64;
}
.cliamte-rain-gisu-four {
	background-color: #fac858;
}
.cliamte-rain-gisu-five {
	background-color: #d53a35;
}

/* 산사태 위험 등급 범례 */
.cliamte-slide-one {
	background-color: #d7191c;
}
.cliamte-slide-two {
	background-color: #fdae61;
}
.cliamte-slide-three {
	background-color: #ffffbf;
}
.cliamte-slide-four {
	background-color: #abdda4;
}
.cliamte-slide-five {
	background-color: #2b83ba;
}

.cliamte-slide-vulnerFclt {
	background-color: #FFB34799;
	border : 1px solid #FF6600;
}
.cliamte-rain-vulnerFclt {
	background-color: #f5736a;
}
.cliamte-rain-ntnRvr {
	background-color: #577afc;
}
.cliamte-rain-lclRvr {
	background-color: #2b74d3;
}
.cliamte-rain-lsmd_cont_uj301_41 {
	background-color: #003c60;
}

/* 폭염대응 열환경지도 범례 */
.cliamte-heat-one {
	background-color: #4a90e2;
}
.cliamte-heat-two {
	background-color: #9c67b8;
}
.cliamte-heat-three {
	background-color: #f4d35e;
}
.cliamte-heat-four {
	background-color: #f7a541;
}
.cliamte-heat-five {
	background-color: #6bbf59;
}
.cliamte-heat-six {
	background-color: #b71c1c;
}

/* 폭염대응 열쾌적성평가지도 범례 */
.cliamte-heat-evl-one {
	background-color: #1f78b4;
}
.cliamte-heat-evl-two {
	background-color: #33a1c9;
}
.cliamte-heat-evl-three {
	background-color: #6ec5e9;
}
.cliamte-heat-evl-four {
	background-color: #a2d5f2;
}
.cliamte-heat-evl-five {
	background-color: #ffe699;
}
.cliamte-heat-evl-six {
	background-color: #ffd266;
}
.cliamte-heat-evl-seven {
	background-color: #ffb84d;
}
.cliamte-heat-evl-eight {
	background-color: #ff8c42;
}
.cliamte-heat-evl-nine {
	background-color: #e04a2f;
}
.cliamte-heat-evl-ten {
	background-color: #b71c1c;
}

/* 시군 홍수위험지수 범례 */
.cliamte-rain-sigun-1 {
	background-color: #a80016;
}
.cliamte-rain-sigun-2 {
	background-color: #b62226;
}
.cliamte-rain-sigun-3 {
	background-color: #c43d36;
}
.cliamte-rain-sigun-4 {
	background-color: #d15846;
}
.cliamte-rain-sigun-5 {
	background-color: #df7361;
}
.cliamte-rain-sigun-6 {
	background-color: #ed8f7b;
}
.cliamte-rain-sigun-7 {
	background-color: #f5a996;
}
.cliamte-rain-sigun-8 {
	background-color: #f9c3b1;
}
.cliamte-rain-sigun-9 {
	background-color: #fbdccc;
}
.cliamte-rain-sigun-10 {
	background-color: #fcefe3;
}
.cliamte-rain-sigun-11 {
	background-color: #dcf3f9;
}
.cliamte-rain-sigun-12 {
	background-color: #b3e5f9;
}
.cliamte-rain-sigun-13 {
	background-color: #8bd7f9;
}
.cliamte-rain-sigun-14 {
	background-color: #66c2ff;
}
.cliamte-rain-sigun-15 {
	background-color: #4da9f0;
}
.cliamte-rain-sigun-16 {
	background-color: #3b91e0;
}
.cliamte-rain-sigun-17 {
	background-color: #2979d1;
}
.cliamte-rain-sigun-18 {
	background-color: #1962c2;
}
.cliamte-rain-sigun-19 {
	background-color: #124fab;
}
.cliamte-rain-sigun-20 {
	background-color: #0c3b94;
}
.cliamte-rain-sigun-21 {
	background-color: #092f85;
}
.cliamte-rain-sigun-22 {
	background-color: #083877;
}
.cliamte-rain-sigun-23 {
	background-color: #08316c;
}
.cliamte-rain-sigun-24 {
	background-color: #072b63;
}
.cliamte-rain-sigun-25 {
	background-color: #06265a;
}
.cliamte-rain-sigun-26 {
	background-color: #052052;
}
.cliamte-rain-sigun-27 {
	background-color: #041b49;
}
.cliamte-rain-sigun-28 {
	background-color: #03153f;
}
.cliamte-rain-sigun-29 {
	background-color: #021036;
}
.cliamte-rain-sigun-30 {
	background-color: #010a2d;
}
.cliamte-rain-sigun-31 {
	background-color: #000423;
}

/* 기후 취약인구 종합 */
.vulner-total-one {
	background-color: #FFDBDB;
}
.vulner-total-two {
	background-color: #FCAFAF;
}
.vulner-total-three {
	background-color: #EC7E7E;
}
.vulner-total-four {
	background-color: #C84444;
}
.vulner-total-five {
	background-color: #A40A0A;
}

.vulner-social-one {
	background-color: #FDEDD3;
}
.vulner-social-two {
	background-color: #FBD998;
}
.vulner-social-three {
	background-color: #EDB166;
}
.vulner-social-four {
	background-color: #DF8933;
}
.vulner-social-five {
	background-color: #D16100;
}

.vulner-health-one {
	background-color: #f7fcf5;
}
.vulner-health-two {
	background-color: #caeac3;
}
.vulner-health-three {
	background-color: #7bc87c;
}
.vulner-health-four {
	background-color: #2a924a;
}
.vulner-health-five {
	background-color: #00441b;
}

.vulner-ecny-one {
	background-color: #f7fbff;
}
.vulner-ecny-two {
	background-color: #c8ddf0;
}
.vulner-ecny-three {
	background-color: #73b3d8;
}
.vulner-ecny-four {
	background-color: #2879b9;
}
.vulner-ecny-five {
	background-color: #08306b;
}

/* 취약시설 범례 */
.cliamte-rain-fclt-one {
	background-color: #832300;
}
.cliamte-rain-fclt-two {
	background-color: #F08F14;
}
.cliamte-rain-fclt-three {
	background-color: #fbe438;
}
.cliamte-rain-fclt-four {
	background-color: #4bb81d;
}
.cliamte-rain-fclt-five {
	background-color: #1b80e5;
}
.cliamte-rain-fclt-six {
	background-color: #754b80;
}
.cliamte-rain-fclt-seven {
	background-color: #C211A7;
}

.weather_wd {
	font-size: 11px;
	font-weight: normal;
}
.weather_ws {
	font-size: 14px;
}

/* 우리동네 비교 모달 */
.climateDiComparePopup .modal--inner {
	/* width: 100%; */
}
.modal--head.climate {
    background: #b04c38;
}
.village--item.first-climate {
	border: 2px solid #c8553e;
}
.village--item.first-climate .village--item--head h3 {
	color:#c8553e;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.village--item.first-climate .village--item--head h3:after {
    display: inline-block;
    content:'';
    background-image:url("../assets/images/modal/ico-climate.png");
    width: 1.5rem;
    height: 1.7rem;
}
.climate-color {
	color: #c8553e;
}
.village--item--data dl dd .climate {
    font-weight: bold;
}
.SNB .SNB--view--panel.view--panel02.vulnerSubPannel .view--panel02--cont, .view--panel02--cont, .SNB .SNB--view--panel.view--panel02.heatSubPannel .view--panel02--cont {
	height: calc(100vh - 80px - 53px);
}
.SNB .SNB--view--panel.view--panel02 .view--panel02--foot .climate-btn {
    background: #c8553e;
    color: #fff;
}
.climateDiComparePopup .modal--content .modal-chart-area {
    border-radius: 1.2rem;
}
.climateDiComparePopup .modal--content .village--item--data dl dd .equal {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    color: #2F9D27;
    text-align: right;
    font-weight: normal;
}

.climateDiComparePopup .modal--content .village--item--data .double-dl dt.full {
    width: 26.6rem;
}
#vulnerComparison .modal--content .village--item--data .double-dl dt.full {
    width: 47%;
}
#heatComparison .modal--content .village--item--data .double-dl dt.full {
    width: 15rem;
}
/* .climateDiComparePopup .modal--content .village--item--data .double-dl.full { */
/* 	padding: 2.4rem 0; */
/* } */
#heatComparison .modal--content .village--item--data .double-dl.full {
	padding: 2.4rem 0;
}
#heatComparison .modal--content .village--item--data .double-dl.full:nth-child(1) {
	padding: 1.75rem 0;
}
.climateDiComparePopup .modal--content .village--item--data .double-dl.center {
	align-items: center;
}
.climateDiComparePopup .modal--content .village--item--data .double-dl dt {
    width: 8rem;
    padding-top: 0.5rem;
}
#vulnerComparison .modal--content .village--item--data .double-dd .tar {
    width: 100%;
}
#heatComparison .modal--content .village--item--data .double-dd .tar {
    width: 100%;
}
#vulnerComparison .modal--content .village--item--data .double-dd-row .txt {
    width: 100%;
    height: 34px;
}
#vulnerComparison .modal--content .village--item--data .double-dd-row .tar {
    height: 34px;
}
#vulnerComparison .modal--content .village--item--data .double-dl.center .double-dd-row .tar, #heatComparison .modal--content .village--item--data .double-dl.center .double-dd-row .tar {
	align-content: center;
}
#vulnerComparison .modal--content .village--item--data .dl-dt {
    width: 20%;
}
/* #vulnerComparison .modal--content--inner, #heatComparison .modal--content--inner { */
/*     max-height: 75rem; */
/* } */

/* 셀렉트 박스 */
.climate-select-div {
	position: absolute;
    top: 16rem;
    left: 77rem;
}
#climate-selector {
	display: flex;
}
#climate-selector .form-control.md {
    width: 10rem;
}

.climate-vulner-score-color {
	color : #c8553e;
}


/* 모바일 css */
@media (max-width: 768px) {
  .climate-select-div {
	  top: 6rem;
	  left: 1rem;
   }
}
@media (max-width: 768px) {
  .SNB .SNB--view--panel.view--panel02.vulnerSubPannel .view--panel02--cont, .view--panel02--cont, .SNB .SNB--view--panel.view--panel02.heatSubPannel .view--panel02--cont {
		height: calc(100vh - 80px - 57px - 70px);
	}
}
@media (max-width: 768px) {
  .climate_compare {
		display: none;
	}
}

/* 다른동네와 비교하기 */
.SNB .SNB--view--panel.view--panel02.heatSubPannel .view--panel02--cont .view--panel02--item.climate_compare .view--panel02--item--ti, .SNB .SNB--view--panel.view--panel02.vulnerSubPannel .view--panel02--cont .view--panel02--item.climate_compare .view--panel02--item--ti {
	margin-bottom: 0rem;
}

.SNB .SNB--view--panel.view--panel02.heatSubPannel .view--panel02--cont .view--panel02--item.climate_compare .climate-btn, .SNB .SNB--view--panel.view--panel02.vulnerSubPannel .view--panel02--cont .view--panel02--item.climate_compare .climate-btn {
	background: #c8553e;
    color: #fff;
}
.SNB .SNB--view--panel.view--panel02.heatSubPannel .view--panel02--cont .view--panel02--item.climate_compare button, .SNB .SNB--view--panel.view--panel02.vulnerSubPannel .view--panel02--cont .view--panel02--item.climate_compare button {
	height: 3.2rem;
    border-radius: 1.6rem;
    font-size: 1.5rem;
    width: 100%;
}
#heatComparison .modal--content .village--item--data .double-dl.full.header {
	min-height: 0;
    height: 0;
    padding: 2rem 0 3rem 0;
}
#heatComparison .modal--content .village--item--data .double-dl.full.header dt.full {
	color: #000;
    text-align: center;
    font-weight: bold;
    padding: 0.5rem 0;
    border-right: solid 1px #bababa;
}
#heatComparison .modal--content .village--item--data .double-dl.full.header .double-dd .tar {
	text-align: center;
    padding: 0.5rem 0;
    border-right: solid 1px #bababa;
}
#heatComparison .modal--content .village--item--data .double-dl.full.header .double-dd .tar:last-child {
	border-right: none;
}
#heatComparison .modal--inner, #vulnerComparison .modal--inner {
    /*max-width: 1750px;*/
}

/* 극한호우 생활인구 팝업 css */
#rain-ppltn-data {
    display: flex;
    position: absolute;
    top: 16rem;
    left: 77rem;
    background: white;
    border-radius: 0.5rem;
    width: 200px;
    height: 100px;
    flex-direction: column;
}
#rain-ppltn-data .stat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0px;
}
#rain-ppltn-modal-btn-close {
    margin-left: 20px;
    width: 24px;
    height: 24px;
    background: url(/gcs/assets/images/panel/layer-pop-close.png) no-repeat center center;
}
#rain-ppltn-data .stat-modal-body {
    text-align: center;
    display: flex;
    flex-direction: column;
    vertical-align: middle;
}
#rain-ppltn-data .stat-modal-body td {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    align-content: center;
        border: 0px solid #c6c6c6;
}

.climate-width53 {
	width: 53px !important;
}
.climate-width50 {
	width: 50px !important;
}
.climate-width65 {
	width: 65px !important;
}
.climate-width51 {
	width: 51px !important;
}
.climate-width57 {
	width: 57px !important;
}
.climate-width64 {
	width: 64px !important;
}
.climate-width57height {
	width: 57px !important;
	height: 19.5px !important;
}
.climate-width64height {
	width: 64px !important;
	height: 19.5px !important;
}
@media (max-width: 768px) {
    .climate-width53, .climate-width57, .climate-width57height, .climate-width50, .climate-width65, .climate-width51, .climate-width64, .climate-width64height {
        margin-right: 4px !important;
        width: 40px !important;
        height: 20px !important;
    }
}
@media (max-width: 768px) {
    #rain-ppltn-data {
        top: 15.5rem;
    	left: auto;
    	right: 6rem;
    	width: 120px;
    	height: 70px;
    }
    #rain-ppltn-data .stat-modal-header {
        padding: 10px 10px 0px;
    }
    #rain-ppltn-data .stat-modal-title {
        font-size: 11px !important;
        font-weight: 400 !important;
    }
    #rain-ppltn-data .stat-modal-body {
        margin: 0px 0px;
    }
    #rain-ppltn-modal-btn-close {
    	margin-left: 0px !important;
    }
    #rain-ppltn-data .stat-modal-body td {
    	font-size: 14px !important;
    	padding: 5px !important;
    }
    #rain-ppltn-data table {
    	margin: 0px !important;
    	height: auto !important;
    }
}

#vulnerPannel .legend-circle .unit {
    margin-top: 1.0rem;
    font-size: 1.2rem;
    color: #555;
    text-align: center;
}